<template>
  <div>
    <div class="select-label">{{ label }}</div>
    <el-autocomplete
      v-model="inputVal"
      :fetch-suggestions="querySearch"
      placeholder="输入企业名称"
      :trigger-on-focus="false"
      @select="handleSelect"
    >
      <template slot-scope="{ item }">
        <div class="flex justify-between items-center">
          <div class="name">{{ item.value }}</div>
          <span class="text-gray-300">{{ item.legalPersonName }}</span>
        </div>
      </template>
    </el-autocomplete>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getCpyListByName } from '@/api/policy'
export default Vue.extend({
  components: {},
  props: {
    label: {
      type: String,
      default: 'Label',
    },
    options: {
      type: Array,
      default: () => [],
    },
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  computed: {
    inputVal: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('update:value', val)
      },
    },
  },
  methods: {
    handleSelect(item) {
      console.log('%c [ item ]-45', 'font-size:13px; background:pink; color:#bf2c9f;', item)
    },
    async querySearch(queryString, cb) {
      const str = queryString.trim()
      if (!str) {
        cb()
      } else {
        const res = await getCpyListByName(queryString.trim())
        const list = res.list?.map((d) => ({
          value: d.name,
          legalPersonName: d.legalPersonName,
        }))
        cb(list)
      }
    },
  },
})
</script>
<style lang="scss" scoped>
.select-label {
  color: #fff;
  margin-bottom: 15px;
}
</style>
